<template>
  <scroll class="recomm-scroll">
    <div class="recomm-container">
      <template v-for="(views, k) of data">
        <slider v-if="views.view_type === 'gallery'" class="gallery">
          <div v-for="(view, index) of views.body.items" :key="index">
            <a :style="getStyle(view)">
              <img :src="addHttps(view.img_url)" class="img" />
            </a>
          </div>
        </slider>

        <cells-auto-fill
          v-else-if="views.view_type === 'cells_auto_fill'"
          :views="views"
        ></cells-auto-fill>

        <divider-line
          v-else-if="views.view_type === 'divider_line'"
          :data="views"
        ></divider-line>
        <div
          v-else-if="views.view_type === 'list_two_type13'"
          class="list_two_type13"
          :style="getStyle(views.body)"
        >
          <a v-for="view of views.body.items" class="view">
            <img v-lazy="view.img_url" />
            <div class="info">
              <div class="name no-wrap">{{ view.product_name }}</div>
              <div class="brief no-wrap">{{ view.product_brief }}</div>
              <div class="price">
                <span v-html.trim="view.product_price"></span>
                <span class="text">起</span>
                <span class="price old" v-if="view.product_org_price">
                  <s v-html.trim="view.product_org_price"></s>
                </span>
              </div>
              <div class="buybtn">立即购买</div>
            </div>
          </a>
        </div>
        <div
          v-else-if="views.view_type === 'list_action_title'"
          class="list_action_title"
        >
          <a v-for="view of views.body.items" class="view">
            <span v-html.trim="view.action_title"></span>
            <span class="icon">></span>
          </a>
        </div>
        <div
          v-else-if="views.view_type === 'list_two_type1'"
          class="list_two_type1"
        >
          <div
            class="view"
            v-for="(view, index) of views.body.items"
            :key="index"
          >
            <div class="img">
              <img v-lazy="addHttps(view.img_url)" class="big" />
              <div class="tag2">
                <img
                  v-for="image of view.product_tag_array"
                  v-lazy="addHttps(image)"
                />
              </div>
            </div>
            <div class="info">
              <div class="name no-wrap">{{ view.product_name }}</div>
              <div class="brief no-wrap">{{ view.product_brief }}</div>
              <div class="price">
                <span v-html.trim="view.product_price"></span>
                <span class="text">起</span>
                <span
                  class="price old"
                  v-if="
                    view.product_org_price &&
                    view.product_price !== view.product_org_price
                  "
                >
                  <s v-html.trim="view.product_org_price"></s>
                </span>
              </div>
            </div>
          </div>
        </div>
        <div
          v-else-if="views.view_type === 'list_one_type2'"
          class="list_one_type2"
        >
          <a v-for="(view, index) of views.body.items">
            <div class="img">
              <img v-lazy="addHttps(view.img_url)" class="big" />
            </div>
            <div class="info">
              <div class="name no-wrap">{{ view.product_name }}</div>
              <div class="brief">{{ view.product_brief }}</div>
              <div class="price mt32">
                <span v-html.trim="view.product_price"></span>
                <!-- <span class="text">起</span> -->
                <span
                  class="price old"
                  v-if="
                    view.product_org_price &&
                    view.product_price !== view.product_org_price
                  "
                >
                  <s v-html.trim="view.product_org_price"></s>
                </span>
              </div>
            </div>
          </a>
        </div>

        <div
          v-else-if="views.view_type === 'list_one_type3'"
          class="list_one_type3"
        >
          <a v-for="(view, index) of views.body.items">
            <div class="info">
              <div class="name no-wrap">{{ view.product_name }}</div>
              <div class="brief">{{ view.product_brief }}</div>
              <div class="price mt32">
                <span v-html.trim="view.product_price"></span>
                <!-- <span class="text">起</span> -->
                <span
                  class="price old"
                  v-if="
                    view.product_org_price &&
                    view.product_price !== view.product_org_price
                  "
                >
                  <s v-html.trim="view.product_org_price"></s>
                </span>
              </div>
            </div>
            <div class="img">
              <img v-lazy="addHttps(view.img_url)" class="big" />
            </div>
          </a>
        </div>
      </template>
    </div>
  </scroll>
</template>

<script type="text/ecmascript-6">
import recomData from 'assets/json/home.json'
import Scroll from 'common/scroll/scroll'
import Slider from 'common/slider/slider'
import DividerLine from 'common/divider-line/divider-line'
import { homeMixin } from 'assets/js/mixin'
import CellsAutoFill from 'common/cells-auto-fill/cells-auto-fill'

// console.log(recomData.data);
recomData.data.data.sections[63].body.h = 106
export default {
  mixins: [homeMixin],

  data() {
    return {
      data: recomData.data.data.sections
    }
  },
  components: {
    Scroll,
    Slider,
    DividerLine,
    CellsAutoFill
  }
}
</script>

<style lang="stylus" scoped ref="stylesheet/stylus">
.recomm-scroll {
  .recomm-container {
    width: 100%;
    font-size: 0;

    a {
      display: inline-block;

      img {
        vertical-align: top;
        width: 100%;
        height: 100%;
      }
    }

    .list_two_type13 {
      padding: 0 0.12rem;
      width: 100%;
      overflow: hidden;
      text-align: center;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;

      .view {
        display: flex;
        flex-direction: column;
        width: 3.4rem;

        img {
          width: 3.44rem;
          height: 2.8rem;
        }

        .info {
          padding: 0.2rem 0.27rem;
          text-align: center;

          .name {
            font-size: 0.28rem;
            color: rgba(0, 0, 0, 0.87);
          }

          .brief {
            margin-top: 0.06rem;
            font-size: 0.22rem;
            line-height: 0.3rem;
            color: rgba(0, 0, 0, 0.54);
          }

          .price {
            position: relative;
            display: inline-block;
            padding-left: 0.5em;
            font-size: 0.28rem;
            color: #ea625b;
            line-height: 1.5em;
            height: 1.5em;

            .text {
              display: inline-block;
              margin-left: 0.04rem;
              font-size: 0.2rem;
            }

            .old {
              display: inline-block;
              margin: 0 0.15rem;
              font-size: 0.22rem;
              color: rgba(0, 0, 0, 0.54);
            }

            &:before {
              content: '\A5';
              position: absolute;
              left: 0;
              top: 0;
              font-size: 0.76em;
              text-decoration: none;
            }
          }
        }

        .buybtn {
          margin: 0 auto;
          padding: 0.16rem 0;
          text-align: center;
          width: 2rem;
          color: #fff;
          font-size: 0.24rem;
          font-weight: 700;
          background: #ea625b;
          border-radius: 0.05rem;
        }
      }
    }

    .list_action_title {
      background: #fff;
      height: 1rem;
      line-height: 1rem;
      font-size: 0.28rem;
      text-align: center;

      .icon {
        padding-left: 0.1rem;
      }
    }

    .list_two_type1 {
      width: 100%;
      overflow: hidden;
      // text-align: center;
      display: flex;
      justify-content: space-between;

      // box-sizing: border-box;
      .view {
        width: 3.59rem;

        .img {
          position: relative;
          width: 3.59rem;
          height: 3.59rem;

          .big {
            width: 100%;
            height: auto;
          }

          .tag2 {
            position: absolute;
            bottom: 3px;
            right: 0;

            img {
              display: inline-block;
              width: 1rem;
              height: auto;
            }
          }
        }

        .info {
          padding: 0.2rem 0.27rem;
          text-align: left;

          .name {
            font-size: 0.28rem;
            color: rgba(0, 0, 0, 0.87);
          }

          .brief {
            margin-top: 0.06rem;
            font-size: 0.2rem;
            line-height: 0.3rem;
            color: rgba(0, 0, 0, 0.54);
          }

          .price {
            position: relative;
            display: inline-block;
            padding-left: 0.5em;
            font-size: 0.28rem;
            color: #ea625b;
            line-height: 1.5em;
            height: 1.5em;

            .text {
              display: inline-block;
              margin-left: 0.04rem;
              font-size: 0.2rem;
            }

            .old {
              display: inline-block;
              margin: 0 0.15rem;
              font-size: 0.22rem;
              color: rgba(0, 0, 0, 0.54);
            }

            &:before {
              content: '\A5';
              position: absolute;
              left: 0;
              top: 0;
              font-size: 0.76em;
              text-decoration: none;
            }
          }
        }
      }
    }

    .list_one_type2, .list_one_type3 {
      a {
        display: flex;

        .img {
          width: 3.6rem;
          height: 3.6rem;
        }

        .info {
          padding: 0.64rem 0.12rem 0 0.32rem;
          box-sizing: border-box;
          width: 3.6rem;
          height: 3.6rem;

          .name {
            font-size: 0.28rem;
            color: rgba(0, 0, 0, 0.87);
          }

          .brief {
            margin-top: 0.06rem;
            font-size: 0.22rem;
            line-height: 0.35rem;
            color: rgba(0, 0, 0, 0.54);
          }

          .price {
            position: relative;
            display: inline-block;
            padding-left: 0.5em;
            font-size: 0.28rem;
            color: #ea625b;
            height: 1.5em;
            line-height: 1.5em;

            &:before {
              content: '\A5';
              position: absolute;
              left: 0;
              top: 0;
              font-size: 0.76em;
              text-decoration: none;
            }

            .text {
              display: inline-block;
              margin-left: 0.04rem;
              font-size: 0.2rem;
            }

            .old {
              display: inline-block;
              margin: 0 0.15rem;
              font-size: 0.22rem;
              color: rgba(0, 0, 0, 0.54);
            }
          }

          .mt32 {
            margin-top: 0.2rem;
          }
        }
      }
    }
  }
}

.no-wrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
